<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

		<title>商品管理</title>

		<link href="../AmazeUI-2.4.2/assets/css/admin.css" rel="stylesheet" type="text/css">
		<link href="../AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css">
		<link rel="stylesheet" type="text/css" href="../js/bootstrap/css/bootstrap.css" />
		<link href="../css/personal.css" rel="stylesheet" type="text/css">
		<link href="../css/orstyle.css" rel="stylesheet" type="text/css">
		<script type="text/javascript" src="../js/vue2.5.js" ></script>
		<script type="text/javascript" src="../js/axios.min.js" ></script>
		<script type="text/javascript" src="../js/jquery-1.11.2.min.js" ></script>
		<script type="text/javascript" src="../js/global.js" ></script>
		<script type="text/javascript" src="../js/bootstrap/js/bootstrap.js" ></script>
		<script type="text/javascript" src="../js/layer/layer.js" ></script>
		<script src="../js/param.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/jquery.min.js"></script>
		<script src="../AmazeUI-2.4.2/assets/js/amazeui.js"></script>
		<style>
			.th-item,.td-item{
			    width: 30%;
			}
			.th-id,.td-id{
				width: 10%;
			}.th-heji{
				width:20%;
			}
			.ss{
				margin-top:45%;
				
			}
			.del :hover{
				color:#ccc;
			}.s12 a{
			color:#000;
			}
			.s12 a:hover{
			color:#095f8a;
			cursor: pointer;
			
			}.s21{
				margin-top:35%;
				padding:5px;
			}.s22{
				margin-top:45%;
				margin-left:5px;
			}
			.s22 a{
			color:#000;
			}
			.s22 a:hover{
			color:#095f8a;
			}.s23{
				margin-top:35%;
				margin-left:15px;
			}
			.s32 a:hover{
			color:#095f8a;
			}
			.r{
				width:220px;
			}
			.r1{
				width:100px;
			}
			.or:hover{
				color:#095f8a;
			}
		
		</style>
	</head>

	<body>
		
            <div class="nav-table">
					   <div class="long-title"><span class="all-goods">全部分类</span></div>
					   <div class="nav-cont">
							<ul>
							<li class="index"><a href="../index.html">首页</a></li>
							<li class="qc"><a href="text.html">推荐</a></li>
							<li class="qc"><a href="../home/search.html">搜索</a></li>
							<li class="qc"><a href="#">团购</a></li>
							<li class="qc last"><a href="about.html">我们</a></li>
						</ul>
						</div>
			</div>
			<b class="line"></b>
		<div class="center container">
			<div class="col-main">
				<div class="main-wrap">

					<div class="user-order">

						<!--标题 -->
						<div class="am-cf am-padding">
							<div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">商品管理</strong> / <small>Goods</small></div>
						</div>
						<hr/>

						<div class="am-tabs am-tabs-d2 am-margin" data-am-tabs>

							<ul class="am-avg-sm-2 am-tabs-nav am-nav am-nav-tabs">
								<li class="am-active"><a href="#tab1" >所有商品</a></li>
								<li><a href="#tab2">数量不足</a></li>
								
							</ul>

							<div class="am-tabs-bd">
								<!-- 所有开始 -->
								<div class="am-tab-panel am-fade am-in am-active" id="tab1">
									<div class="order-top">
										<div class="th th-id">
											<td class="td-inner">商品编号</td>
										</div>
										<div class="th th-item">
											<td class="td-inner">商品</td>
										</div>
										<div class="th th-price">
											<td class="td-inner">单价</td>
										</div>
										<div class="th th-number">
											<td class="td-inner">数量</td>
										</div>
										<div class="th th-operation">
											<td class="td-inner">产地</td>
										</div>
										<div class="th th-item">
											<td class="td-inner">操作</td>
										</div>
									</div>

									<div class="order-main">
										<div class="order-list">
											
											<div class="order-status5">
												<div class="order-title">
												</div>
												<div class="order-content">
													<div class="order-left">
														<ul class="item-list"  v-for="(goods,index) in goodsData">
															<li class="td td-id">
																<div class="dd-num ss">{{goods.gid}}</div>
															</li>
															<li class="td td-item">
																<div class="item-pic">
																	<a href="#" class="J_MakePoint">
																		<img :src="baseUrl+'/goods/getgoods?gid='+ goods.gid" class="itempic J_ItemImg">
																	</a>
																</div>
																<div class="item-info">
																	<div class="item-basic-info">
																		<a href="#">
																			<p>{{goods.gname}}</p>
																			<p class="info-little">描述：{{goods.gdesc}}</p>
																				<br/>
																		</a>
																	</div>
																</div>
															</li>
															<li class="td td-price">
																<div class="item-price">
																	￥{{goods.gprice}}.00
																</div>
															</li>
															<li class="td td-number">
																<div class="item-number">
																	<span></span>{{goods.gcount}}
																</div>
															</li>
															<li class="td td-operation">
																<div class="item-operation">
																	{{goods.gplace}}
																</div>
															</li>
															<li class="td td-item">
																<div class="item-operation s12" >
																	<button type="button" class="btn btn-primary btn-sm update-btn" @click="toUpdate(goods.gid)">
																		<b class="glyphicon glyphicon-pencil"></b> 更新
																	</button>
																	<button type="button" class="btn btn-danger btn-sm del-btn " @click="del(goods.gid,index)">
																		<b class="glyphicon glyphicon-trash"></b> 删除
																	</button>
																</div>
															</li>
														</ul>
													</div>
													
												</div>
												<!--分页工具条-->
												<div id="row">
													<div class="col-sm-4">
														<div class="pageInfo">
															共{{pager.recordCount}}条数据{{pager.pageNum}}/{{pager.pageCount}}页
														</div>
														<div class="">
															<a href="javascript:;" @click="addGoods()" class="btn btn-success btn-block">增加商品</a>
														</div>
													</div>
													<nav class="col-sm-8">
														<nav id="pageNav">
															<ul class="pagination pagination-sm pull-right">
																<li><a href="javascript:;" id="firstPage" @click="query(1)" v-show="pager.pageNum!=1">首页</a></li>
																<li><a href="javascript:;" id="prevPage" @click="query(pager.pageNum-1)" v-show="pager.pageNum!=1">上一页</a></li>
																<li :class="{active:pager.pageNum==i}" v-for="i in pageBtns"> <a href="javascript:;" @click="query(i)">{{i}}</a></li>
																<li><a href="javascript:;" id="nextPage" @click="query(pager.pageNum+1)" v-show="pager.pageNum!=pager.pageCount">下一页</a></li>
																<li><a href="javascript:;" id="lastPage" @click="query(pager.pageCount)" v-show="pager.pageNum!=pager.pageCount">末页</a></li>
															</ul>
														</nav>
													</nav>	
												</div>	
											</div>
										</div>
									</div>
								</div>
								<!-- 所有结束 -->
								<!-- 不足开始 -->
								<div class="am-tab-panel am-fade am-in " id="tab2">
									<div class="order-top">
										<div class="th th-id">
											<td class="td-inner">商品编号</td>
										</div>
										<div class="th th-item">
											<td class="td-inner">商品</td>
										</div>
										<div class="th th-price">
											<td class="td-inner">单价</td>
										</div>
										<div class="th th-number">
											<td class="td-inner">数量</td>
										</div>
										<div class="th th-operation">
											<td class="td-inner">产地</td>
										</div>
										<div class="th th-item">
											<td class="td-inner">操作</td>
										</div>
										
										
										
									</div>

									<div class="order-main">
										<div class="order-list">
											
											
											<div class="order-status5">
												<div class="order-title">
													
												</div>
												
												<div class="order-content">
													<div class="order-left">
														<ul class="item-list"  v-for="(goods,index) in goodsData2">
															<li class="td td-id">
																<div class="dd-num ss">{{goods.gid}}</div>
															</li>
															<li class="td td-item">
																<div class="item-pic">
																	<a href="#" class="J_MakePoint">
																		<img :src="baseUrl+'/goods/getgoods?gid='+ goods.gid" class="itempic J_ItemImg">
																	</a>
																</div>
																<div class="item-info">
																	<div class="item-basic-info">
																		<a href="#">
																			<p>{{goods.gname}}</p>
																			<p class="info-little">描述：{{goods.gdesc}}</p>
																				<br/>
																		</a>
																	</div>
																</div>
															</li>
															<li class="td td-price">
																<div class="item-price">
																	￥{{goods.gprice}}.00
																</div>
															</li>
															<li class="td td-number">
																<div class="item-number">
																	<span></span>{{goods.gcount}}
																</div>
															</li>
															<li class="td td-operation">
																<div class="item-operation">
																	{{goods.gplace}}
																</div>
															</li>
															<li class="td td-item">
																<div class="item-operation s12" >
																	<button type="button" class="btn btn-primary btn-sm update-btn" @click="toUpdate(goods.gid)">
																		<b class="glyphicon glyphicon-pencil"></b> 更新
																	</button>
																	<button type="button" class="btn  btn-sm btn-success " @click="addcount(goods.gid,index)">
																		<b class="glyphicon glyphicon-plus-sign"></b> 进货
																	</button>
																	<button type="button" class="btn btn-danger btn-sm del-btn " @click="del(goods.gid,index)">
																		<b class="glyphicon glyphicon-trash"></b> 删除
																	</button>
																</div>
															</li>
															
														</ul>

													</div>
													
												</div>
												<!--分页工具条-->
												<div id="row">
													<div class="col-sm-4">
														<div class="pageInfo">
															共{{pager2.recordCount}}条数据{{pager2.pageNum}}/{{pager2.pageCount}}页
														</div>
														<div class="">
															<a href="javascript:;" @click="addGoods()" class="btn btn-success btn-block">增加商品</a>
														</div>
													</div>
													<nav class="col-sm-8">
														<nav id="pageNav">
															<ul class="pagination pagination-sm pull-right">
																<li><a href="javascript:;" id="firstPage" @click="queryless(1)" v-show="pager2.pageNum!=1">首页</a></li>
																<li><a href="javascript:;" id="prevPage" @click="queryless(pager2.pageNum-1)" v-show="pager2.pageNum!=1">上一页</a></li>
																<li :class="{active:pager2.pageNum==i}" v-for="i in pageBtns2"> <a href="javascript:;" @click="queryless(i)">{{i}}</a></li>
																<li><a href="javascript:;" id="nextPage" @click="queryless(pager2.pageNum+1)" v-show="pager2.pageNum!=pager2.pageCount">下一页</a></li>
																<li><a href="javascript:;" id="lastPage" @click="queryless(pager2.pageCount)" v-show="pager2.pageNum!=pager2.pageCount">末页</a></li>
															</ul>
														</nav>
													</nav>	
												</div>	
											</div>
										</div>
									</div>
								</div>
								<!-- 不足结束 -->
								
							</div>
						</div>
					</div>
				</div>
				<!--底部-->
				<div class="footer">
					<div class="footer-hd">
						<p>
							
							<b>|</b>
							<a href="#">商城首页</a>
							<b>|</b>
							<a href="#">支付宝</a>
							<b>|</b>
							<a href="#">物流</a>
						</p>
					</div>
					<div class="footer-bd">
						<p>
							
							<a href="#">合作伙伴</a>
							<a href="#">联系我们</a>
							<a href="#">网站地图</a>
							<em>© 2015-2025  <a href="http://www.cssmoban.com/" target="_blank" title=""></a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></em>
						</p>
					</div>

				</div>
			</div>
			<aside class="menu">
				<ul>
					<li class="person active">
						<a href="person/index.html"><i class="am-icon-user"></i>个人中心</a>
					</li>
					<!--管理员界面-->
					<li class="person">
						<p><i class="am-icon-qq"></i>管理系统</p>
						<ul>
							<li> <a href="querygoods.html">商品管理</a></li>
							<li> <a href="queryorder.html">订单管理</a></li>		
							
						</ul>
					</li>
					<!--普通界面-->
					<li class="person">
						<p><i class="am-icon-newspaper-o"></i>个人资料</p>
						<ul>
							<li> <a href="information.html">个人信息</a></li>
							<li> <a href="safety.html">安全设置</a></li>
							<li> <a href="address.html">地址管理</a></li>
							
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-balance-scale"></i>我的交易</p>
						<ul>
							<li><a href="order.html">订单管理</a></li>
							<li> <a href="change.html">退款售后</a></li>
							<li> <a href="comment.html">评价商品</a></li>
						</ul>
					</li>
					
					<li class="person">
						<p><i class="am-icon-tags"></i>我的收藏</p>
						<ul>
							<li> <a href="collection.html">收藏</a></li>
																		
						</ul>
					</li>
					<li class="person">
						<p><i class="am-icon-qrcode"></i>在线客服</p>
						<ul>
							<li> <a href="suggest.html">意见反馈</a></li>		
							<li> <a href="news.html">我的消息</a></li>
						</ul>
					</li>
					
				</ul>

			</aside>
		</div>
		<script>
		
		//vue
		var vue = new Vue({
			el: '.container',
			data: {
				goodsData: [], //商品数据
				goodsData2: [], //商品数据
				pager: {}, //分页数据
				pager2: {}, 
				pageBtns: [],//分页按钮数组
				pageBtns2: [],//分页按钮数组
				baseUrl:baseUrl
			},
			methods: {
				//查询数据方法
				query: function(pageNum) {
					axios.get(baseUrl + '/goods/query', {
							params: {
								pageNum: pageNum,
								pageSize: 5
							}
						})
						.then(function(response) {
							this.goodsData = response.data.list;
							//响应的分页数据复制给数据模型
							this.pager = response.data.pager;
							//生成分页页码按钮
							var start = this.pager.pageNum - 2;
							var end = this.pager.pageNum + 2;

							if (this.pager.pageNum <= 3) {
								start = 1;
								end = 5;
							}
							if (end > this.pager.pageCount)
								end = this.pager.pageCount;
							this.pageBtns = [];

							for (var i = start; i <= end; i++) {
								this.pageBtns.push(i);
							}

						}.bind(this))
						.catch(function(error) {
							layer.msg('获得数据失败');
						});
						
					
				},
				queryless:function(pageNum){
					//查询少量的
					axios.get(baseUrl + '/goods/queryless', {
						params: {
							pageNum: pageNum,
							pageSize: 5
						}
					})
					.then(function(response) {
						this.goodsData2 = response.data.list;
						//响应的分页数据复制给数据模型
						this.pager2 = response.data.pager;
						//生成分页页码按钮
						var start = this.pager2.pageNum - 2;
						var end = this.pager2.pageNum + 2;

						if (this.pager2.pageNum <= 3) {
							start = 1;
							end = 5;
						}
						if (end > this.pager2.pageCount)
							end = this.pager2.pageCount;
						this.pageBtns2 = [];

						for (var i = start; i <= end; i++) {
							this.pageBtns2.push(i);
						}

					}.bind(this))
					.catch(function(error) {
						layer.msg('获得数据失败');
					});
				},
				//删除
				del:function(gid,index){
					if(!window.confirm('确定要删除这个商品吗？'))
						return;
					//ajax
					axios.get(baseUrl + '/goods/delete',{
							params:{
								gid:gid
							}
						})
						.then(function(response) {
							this.goodsData.splice(index,1);
							layer.msg('删除商品成功！');
						}.bind(this))
						.catch(function(error) {
							layer.msg('删除商品失败');
						});
				},
				//修改
				toUpdate:function(gid,index){
					
					layer.open({
						title:'商品详情',
						type:2,
						area:['400px','350px'],
						content:'../UpdateGoods.html?gid='+gid +'&index='+index,
						end: function () {
					        location.reload();
					      }
					});
					
				},
				addcount:function(gid,index){

					layer.open({
						title:'联系供货商',
						type:2,
						area:['400px','350px'],
						content:'../UpdateGoods2.html?gid='+gid +'&index='+index,
						
					});
				},
				addGoods:function(){
					layer.open({
						title:'增加商品',
						type:2,
						area:['500px','600px'],
						content:'../AddGoods.html'
						
					});
				}
			},
			mounted: function() {
				this.query(1);
				this.queryless(1);
			}
		})
		</script>
	</body>

</html>